import * as THREE from 'three';
// 初识材质
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 导入水面
import { Water } from 'three/examples/jsm/objects/Water2';
// 导入gltf载入库
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
// 1.创建场景 
const scene = new THREE.Scene();
// 2.创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 设置相机位置
camera.position.set(-50, 50, 130);
// 更新摄像头比例
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像头投影矩阵
camera.updateProjectionMatrix();
// 添加到场景中
scene.add(camera);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({
    // 设置抗锯齿
    antialias: true,
    // 对数深度缓冲区
    logarithmicDepthBuffer: true
});
// 设置编码
renderer.outputEncoding = THREE.sRGBEncoding;
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 渲染器开启阴影
renderer.shadowMap.enabled = true;
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼
controls.enableDamping = true;

window.addEventListener("resize", () => {
    camera.position.set(-50, 50, 130);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
});

(function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
})();

// 添加测试素材
// const planeGeometry = new THREE.PlaneGeometry(100, 100);
// const planeMaterial = new THREE.MeshBasicMaterial({
//     color: 0xffffff,
// });
// const plane = new THREE.Mesh(planeGeometry, planeMaterial);

// scene.add(plane);

// 添加天空球体
const texture = new THREE.TextureLoader().load('./textures/sky.jpg');
const skyGeometry = new THREE.SphereGeometry(500, 60, 60);
const skyMaterial = new THREE.MeshBasicMaterial({
    map: texture
});
const sky = new THREE.Mesh(skyGeometry, skyMaterial);
sky.geometry.scale(1, 1, -1);
scene.add(sky);

// 视频纹理
const video = document.createElement('video');
video.src = "./textures/sky.mp4";
video.loop = true;
video.muted = true;
video.play();
const texture2 = new THREE.VideoTexture(video)
skyMaterial.map = texture2;
skyMaterial.needsUpdate = true;
// 设置环境纹理
scene.background = texture;
scene.environment = texture;
// 载入环境纹理
const hdrLoader = new RGBELoader();
hdrLoader.loadAsync("./assets/050.hdr").then((texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    scene.environment = texture;
});

// 添加平行光
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-100, 100, 10);
scene.add(light);
// 创建水面
const waterGeomtry = new THREE.CircleGeometry(300, 64);
const water = new Water(waterGeomtry, {
    textureWidth: 1024,
    textureHeight: 1024,
    color: 0xeeeeff,
    flowDirection: new THREE.Vector2(1, 1),
    scale: 1
});
water.rotation.x = -Math.PI / 2;
water.position.y = 3;
scene.add(water);

// 添加小岛模型
// 实例化gltf载入库
const loader = new GLTFLoader();
// 实例化draco载入库
const dracoLoader = new DRACOLoader();
// 添加draco载入库
dracoLoader.setDecoderPath("./draco/");
// 添加draco载入库
loader.setDRACOLoader(dracoLoader);

loader.load("./model/island2.glb", (gltf) => {
  scene.add(gltf.scene);
});
